<template>
  <div class="inout">
    <div class="title">
      <el-row>
        <el-col :span="6">
          <p>入库/出库信息</p>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <span v-for="item in time" :key="item.value" :class="selTime===item.value?'tiemActive':''" @click="changeFn(item.value)">{{ item.text }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="echarts" />
  </div>
</template>
<script>
import { sumList } from '@/api'
export default {
  data() {
    return {
      nodeCollectList: [],
      count: null,
      time: [{ text: '本周', value: 'w' }, { text: '本月', value: 'e' }, { text: '本年', value: 'c' }],
      selTime: 'w',
      xAxisData: [],
      seriesData: []
    }
  },
  async created() {
    await this.sumListFn(this.selTime)
    this.echarts()
  },
  methods: {
    // 接口
    async sumListFn(dimension) {
      const res = await sumList({ dimension })
      this.xAxisData = res.data.data.x
      this.seriesData = res.data.data.data
    },
    // 基本柱形图
    echarts() {
      const chartBox = this.$echarts.init(document.getElementById('echarts'))
      const option = {
        grid: {
          left: '3%',
          right: '2%',
          bottom: '20%'
        },
        xAxis: {
          data: this.xAxisData
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(255,255,255,0.7)'
        },
        legend: {
          bottom: '5%'
        },
        yAxis: {
          lineStyle: {
            type: 'dashed' // 设置网格线类型 dotted：虚线 solid:实线
          }
        },
        series: [
          {
            name: this.seriesData[0].name,
            barWidth: 18,
            type: 'bar',
            data: this.seriesData[0].data,
            itemStyle: {
              color: '#fc7011'
            },
            barGap: 0
          },
          {
            name: this.seriesData[1].name,
            barWidth: 18,
            type: 'bar',
            data: this.seriesData[1].data,
            itemStyle: {
              color: '#fcb11c'
            }
          }
        ]
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function() {
        chartBox.resize()
      })
    },
    async changeFn(val) {
      this.selTime = val
      await this.sumListFn(this.selTime)
      this.echarts()
    }
  }
}
</script>

<style lang="scss" scoped>
.inout {
  margin-top: 20px;
  height: 500px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;

  .grid-content {
    text-align: right;
    span{
    background: #fff;
    border: 1px solid #dcdfe6;
    font-weight: 400;
    border-left: 0;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    cursor: pointer;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    padding: 10px 20px;
    &:first-child{
      border-left: 1px solid #dcdfe6;
      border-radius: 4px 0 0 4px;
    }
    &:last-child{
      border-radius:0 4px  4px 0;
    }
    }
  }
}

#echarts {
  height: 100%;
}

.tiemActive {
  color: #fff !important;
  background-color: #ffb200 !important;
  border-color: #ffb200 !important;
}
</style>
